html框架点击左边目录内容显示在右边框架 定义框架为目录 标题 内容 这三个框架,我们点击左边的目录,目录里面的内容会出现在内容这个框架里看下边怎么操作。
先创建第一个index.html文件,代码如下:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<title>index</title>
</head>
<frameset cols="20%,80%"><!--定义页面左边分20%右边分80%-->
<frame src="目录.html"name="left"><!--定义左边框架使用文件为目录.html框架的名字为lefr--><frameset rows="20%,80%"><!--定义右边80%分为上下两个框架一个20%一个80%-->
<frame src="标题.html" name="rightup"><!--80%中上边20%给标题.html文件使用,框架名字为rightup-->
<frame src="内容.html"name="rightdown"><!--80%中下边80%给内容.html文件使用,框架名字为rightdown-->
</frameset>
</frameset>
</html>
然后创建目录.html文件,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>目录</title>
</head>
<body>
<h1>目录</h1>
<a href="内容1.html"target="rightdown">内容1</a><br> <!--将内容1文件的内容指定显示给名为rightdown的框架-->
<a href="内容2.html"target="rightdown">内容2</a><br> <!--将内容2文件的内容指定显示给名为rightup的框架-->
</body><!--上边的target为指定-->
</html>
创建标题.html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>标题</title>
</head>
<body>
<h1>框架点击目录框架,显示在内容框架</h1> </body>
</html>
创建内容.html,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内容</title>
</head>
<body>
请认真看注释!
</body>
</html>
创建内容1.html这个文件需要点击目录才会显示代码如下:
<html>
<head>
<meta charset="utf-8">
<title>内容1</title>
</head>
<body >
我是御雪
</body>
</html>
创建内容2.html意思同上,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内容2</title>
</head>
<body>
csdn
</body>
</html>
到这里就结束了!